<template>
    <div class="movie-item-container">
        <div class="movie-left-img">
            <image v-lazy="info?.image" class="img"></image>
            <!-- <image class="img" style="height: ;" mode="aspectFill" :src="info?.image" alt="" /> -->
        </div>
        <div class="movie-center-text">
            <div class="title">{{ info?.filmName }}</div>
            <div class="movie-type" v-if="info?.versionType">
                <nut-tag color="#5232B7" plain>{{ info?.versionType }}</nut-tag>
            </div>
            <div v-else style="height: 30px;"></div>
            <div class="score" v-if="info?.score">
                <div class="score-text">评分:</div>
                <div class="score-num">{{ info?.score }}</div>
            </div>
            <div class="score" v-else>
                <div class="score-text">评分:</div>
                <div class="score-zw"> 暂无</div>
            </div>
            <div class="actor" v-if="info?.director">导演:{{ info?.director }}</div>
            <div class="actor" v-else>导演: 暂无</div>
            <div class="person" v-if="info?.cast">主演:{{ info?.cast }}</div>
            <div class="person" v-else>主演: 暂无</div>
        </div>
        <div class="movie-right-btn">
            <nut-button size="mini" color="linear-gradient(to right, #5232B7,#7237BC)">购票</nut-button>
        </div>
    </div>
</template>
<script setup lang="ts">
import { toRefs } from 'vue'
const props = defineProps({
    info: Object
})
const { info } = toRefs(props)
</script>
<style lang="less">
.movie-item-container {
    display: flex;
    padding: 25px 15px;
    box-sizing: border-box;
    justify-content: space-between;
    // align-items: center;
    .movie-left-img {
        // flex: 3;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 18px;
        overflow: hidden;
        height: 228px;
        width: 156px;
        .img {
            width: 100%;
            height: 100%;
            background-size: 100%;
        }
    }
    .movie-right-btn {
        // flex: 2;
        display: flex;
        justify-content: center;
        align-items: center;

        .nut-button--default {
            border: none !important;
            padding: 30px;
        }
    }
    .movie-center-text {
        flex: 3;
        margin-left: 30px;
        .title {
            font-size: 24px;
            font-weight: 700;
        }
        .movie-type {
            font-size: 24px;
            font-weight: 500;
            margin: 10px 0;

            .nut-tag .nut-tag--default .nut-tag--plain {
                font-size: 20px !important;
            }
        }
        .score {
            font-size: 24px;
            display: flex;
            align-items: center;
            // margin-top: 10px;
            // justify-content: center;
            .score-text {
                color: #858a99;
            }

            .score-zw {
                color: #7237BC;
                font-size: 22px;
                margin-left: 8px;
            }

            .score-num {
                color: #7237BC;
                margin-left: 10px;
                font-size: 26px;
                font-style: italic;
            }
        }

        .actor {
            font-size: 22px;
            margin-top: 5px;
            color: #858a99;
        }

        .person {
            font-size: 22px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-top: 5px;
            color: #858a99;
        }

    }
}
</style>